<script setup>
import {instance} from "@/util/canvasEditor";
import {useMinAndMax} from "@/components/PicEdit/hooks";

const labelSpan = 6
const defaultAttr = {
  label: {
    lg: {span: labelSpan}, md: {span: 24}
  },
  content: {
    lg: {span: 24 - labelSpan}, md: {span: 24}
  }
}
const props = defineProps({
  activeObject: {
    type: Object,
    default: null
  }
})
const currentConfig = ref(null);
const activeObject = ref(null)
const inputNumber = ref(null)
const {setFontSizeLimit} = useMinAndMax()
const a = ref(2222222)
console.log(props)

function handleChangeConfig(value, key) {

  const activeObject = instance.canvas.getActiveObject()
  if (key === 'fontSize') {
    const ratio = instance.ratio;
    const currentValue = setFontSizeLimit(value)
    activeObject.set({
      [key]: currentValue / ratio
    })
    currentConfig.value['fontSize'] = currentValue
  } else if (key === 'strokeWidth') {
    const ratio = instance.ratio;
    activeObject.set({
      strokeWidth: value / ratio
    })
    // currentConfig.value['strokeWidth'] = value
  } else {
    activeObject.set({
      [key]: value
    })
  }

  instance.canvas.renderAll()
}

function handleChangeText(e) {
  const activeObject = instance.canvas.getActiveObject()
  // activeObject.enterEditing();
  activeObject.set({
    text: String(e.target.value)
  })

  instance.canvas.renderAll()
}

function setEditConfig(obj) {
  const ratio = instance.ratio;
  activeObject.value = obj
  currentConfig.value = null
  if (obj.type === 'i-text') {
    const {fill, text, fontSize} = obj
    currentConfig.value = {fill, text, fontSize: Math.ceil(fontSize * ratio)};
  }
  if (obj.type === 'circle'
  ) {
    const {fill, stroke, strokeWidth} = obj

    currentConfig.value = {fill, stroke, strokeWidth: Math.ceil(strokeWidth * ratio)};
  }

  if (obj.type === 'rect'
  ) {
    const {fill, stroke, strokeWidth} = obj
    currentConfig.value = {fill, stroke, strokeWidth: Math.ceil(strokeWidth * ratio)};
  }

}

defineExpose({setEditConfig})
</script>

<template>
  <div  v-if="activeObject && currentConfig">
    <div class="tool-title">配置</div>
    <!--文字编辑-->
    <template v-if="activeObject.type ==='i-text'">
      <Row className="tool-row">
        <Col className="tool-col-label" v-bind="defaultAttr.label">
          颜色
        </Col>
        <Col v-bind="defaultAttr.content">
          <ColorPicker v-model="currentConfig.fill" :colors="['#ffffff']" :transfer="true"
                       @on-change="(color)=>handleChangeConfig(color,'fill')"/>
        </Col>
      </Row>
      <Row className="tool-row">
        <Col className="tool-col-label" v-bind="defaultAttr.label">
          文字内容
        </Col>
        <Col v-bind="defaultAttr.content">
          <Input v-model="currentConfig.text" @on-change="handleChangeText"/>
        </Col>
      </Row>
      <Row>
        <Col className="tool-col-label" v-bind="defaultAttr.label">
          文字大小
        </Col>
        <Col v-bind="defaultAttr.content">
          <InputNumber :editable="false" :value="currentConfig.fontSize" controls-outside max="32"
                       min="12"
                       step="1"
                       @on-change="(value)=>handleChangeConfig(value,'fontSize')"></InputNumber>
        </Col>
      </Row>
    </template>
    <template v-if="activeObject.type ==='circle'">
      <Row className="tool-row">
        <Col className="tool-col-label" v-bind="defaultAttr.label">
          颜色
        </Col>
        <Col v-bind="defaultAttr.content">
          <ColorPicker v-model="currentConfig.fill" :colors="['#ffffff']" :transfer="true" alpha
                       @on-change="(color)=>handleChangeConfig(color,'fill')"/>
        </Col>
      </Row>
      <Row className="tool-row">
        <Col className="tool-col-label" v-bind="defaultAttr.label">
          边框颜色
        </Col>
        <Col v-bind="defaultAttr.content">
          <ColorPicker v-model="currentConfig.stroke" :colors="['#ffffff']" :transfer="true" alpha
                       @on-change="(color)=>handleChangeConfig(color,'stroke')"/>
        </Col>
      </Row>
      <Row className="tool-row">
        <Col className="tool-col-label" v-bind="defaultAttr.label">
          边框粗细
        </Col>
        <Col v-bind="defaultAttr.content">
          <InputNumber :editable="false" :value="currentConfig.strokeWidth" controls-outside max="10"
                       min="0"
                       @on-change="(value)=>handleChangeConfig(value,'strokeWidth')"></InputNumber>
        </Col>
      </Row>
    </template>

    <template v-if="activeObject.type ==='rect'">
      <Row className="tool-row">
        <Col className="tool-col-label" span="4">
          颜色
        </Col>
        <Col>
          <ColorPicker v-model="currentConfig.fill" :colors="['#ffffff']" :transfer="true" alpha
                       @on-change="(color)=>handleChangeConfig(color,'fill')"/>
        </Col>
      </Row>
      <Row className="tool-row">
        <Col className="tool-col-label" span="4">
          边框颜色
        </Col>
        <Col>
          <ColorPicker v-model="currentConfig.stroke" :colors="['#ffffff']" :transfer="true" alpha
                       @on-change="(color)=>handleChangeConfig(color,'stroke')"/>
        </Col>
      </Row>
      <Row className="tool-row">
        <Col className="tool-col-label" v-bind="defaultAttr.label">
          边框粗细
        </Col>
        <Col v-bind="defaultAttr.content">
          <InputNumber :editable="false" :max="10" :min="0" :value="currentConfig.strokeWidth"
                       controls-outside
                       @on-change="(value)=>handleChangeConfig(value,'strokeWidth')"></InputNumber>
        </Col>
      </Row>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.tool-col-label {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.tool-row {
  margin-bottom: 16px;
}
</style>
